Authentication System in React.js (JWT + Refresh Token)

একটি Modern Web Application এ Authentication System অবশ্যই Secure এবং Scalable হওয়া উচিত। React.js এ সাধারণত JWT Access Token এবং Refresh Token ব্যবহার করা হয় যাতে User দীর্ঘ সময় Security বজায় রেখে App ব্যবহার করতে পারে। এই Guide এ আপনি শিখবেন কীভাবে Frontend + Backend মিলিয়ে একটি Professional Auth System তৈরি করবেন।

🔑 What is JWT?

JWT (JSON Web Token) হল একটি Digital Token যা user কে authenticate করার জন্য ব্যবহৃত হয়। Server user login করলে তার জন্য একটি Access Token তৈরি করে।

JWT Contains:

• Header → algorithm + token type
• Payload → user data (id, email, role)
• Signature → token validation

Access Token সাধারণত 15min – 1h valid থাকে।

♻️ What is Refresh Token?

Refresh Token হল একটি Long-term Token (7–30 days) যা server এ সংরক্ষণ করা নিরাপদ। এটি Access Token expire হয়ে গেলে নতুন Access Token generate করতে সাহায্য করে।

Why Refresh Token?

• Access Token short-lived → বেশি security
• User আবার login করতে হয় না
• Server Refresh Token verify করে নতুন Access Token দেয়

🛠 Complete Authentication Flow

1. User logs in → Server validates
2. Server generates:
   • Access Token (short expiry)
   • Refresh Token (stored in httpOnly cookie)
3. React stores Access Token in memory/state
4. Every protected API request → Access Token send
5. If Access Token expires → React sends Refresh Token request
6. Server verifies Refresh Token → send new Access Token

🧪 Example Login API (Node.js + JWT)

// login controller
const jwt = require("jsonwebtoken");

exports.login = (req, res) => {
  const user = { id: 1, email: "test@gmail.com", role: "admin" };

  const accessToken = jwt.sign(user, process.env.ACCESS_SECRET, {
    expiresIn: "15m"
  });

  const refreshToken = jwt.sign(user, process.env.REFRESH_SECRET, {
    expiresIn: "7d"
  });

  res.cookie("refreshToken", refreshToken, {
    httpOnly: true,
    secure: true,
    sameSite: "strict"
  });

  res.json({ accessToken });
};

⚛ React.js — Save Tokens and Login

const loginUser = async (email, password) => {
  const response = await fetch("http://localhost:5000/api/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password })
  });

  const data = await response.json();
  localStorage.setItem("accessToken", data.accessToken);

  return data;
};

Refresh Token কখনো localStorage বা browser এ store করা হয় না → Always store in httpOnly cookie

🔐 Protected API Request in React

const api = async () => {
  const token = localStorage.getItem("accessToken");

  const res = await fetch("http://localhost:5000/api/user", {
    headers: {
      Authorization: "Bearer " + token
    }
  });

  return res.json();
};

♻️ Auto Refresh Token Logic (React)

Access Token expire হলে React নতুন Token নিয়ে আসে:

const fetchWithRefresh = async (url, options = {}) => {
  let token = localStorage.getItem("accessToken");

  let res = await fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${token}`
    }
  });

  // If token expired
  if (res.status === 401) {
    const refreshRes = await fetch("http://localhost:5000/api/refresh", {
      method: "POST",
      credentials: "include"
    });

    const data = await refreshRes.json();
    localStorage.setItem("accessToken", data.accessToken);

    // retry
    token = data.accessToken;
    res = await fetch(url, {
      ...options,
      headers: { Authorization: `Bearer ${token}` }
    });
  }

  return res.json();
};

🧭 Access Token Refresh API

exports.refresh = (req, res) => {
  const refreshToken = req.cookies.refreshToken;

  if (!refreshToken)
    return res.status(401).json({ message: "No refresh token" });

  jwt.verify(refreshToken, process.env.REFRESH_SECRET, (err, user) => {
    if (err) return res.status(403).json({ message: "Invalid refresh token" });

    const newAccessToken = jwt.sign(
      { id: user.id, email: user.email },
      process.env.ACCESS_SECRET,
      { expiresIn: "15m" }
    );

    res.json({ accessToken: newAccessToken });
  });
};

🚪 Logout Logic

Logout হলে Refresh Token cookie মুছে ফেলতে হবে:

// logout controller
exports.logout = (req, res) => {
  res.clearCookie("refreshToken");
  res.json({ message: "Logged out" });
};

🔒 Best Security Practices

• Refresh Token → always in httpOnly cookie
• Access Token → only store in memory/localStorage
• Always verify roles in backend
• Access Token expiry short রাখুন (15-30 minutes)
• Refresh Token every 7 days rotate করা উচিত
• Use HTTPS in production

🎯 Final Summary (Easy Explanation)

• JWT Access Token = Short time login identity
• Refresh Token = Long-term login support
• React Access Token রাখে localStorage এ
• Refresh Token cookie তে থাকে → user দেখতে পায় না
• Access Token expire → Refresh Token দিয়ে নতুন Token

📌 Conclusion

JWT + Refresh Token মিলিয়ে তৈরি করা Authentication System আজকের দিনে সবচেয়ে Secure ও Standard Method। React.js এবং Node.js backend দিয়ে আপনি সহজেই একটি Production-level system তৈরি করতে পারবেন।